<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container" class="active" myattr="myval">
      <!-- 我是注释 -->
      <p>我是span</p>
      我是文本
    </div>
    <script>
      // 节点类型
      // 获取container里的所有节点
      var containerEle = document.querySelector(".container");
      //   var eles = containerEle.childNodes;
      //   console.log(eles);

      // 节点类型 ： nodeType是 1 ：证明这个节点是元素节点 如果是2： 证明是属性节点  3：证明是文本节点 8：是注释节点
      // 每一个节点都会有节点名:nodeName  和节点值:nodeValue
      //1.获取元素节点 ，元素节点的nodeType 1  节点名是大写的标签名 节点值是null
      //   var eleNode = eles[3];
      //   console.log(eleNode.nodeType); //1
      //   if (eleNode.nodeType == 1) {
      //     console.log("是一个元素节点"); //是一个元素节点
      //     console.log(eleNode.nodeName); //p
      //     console.log(eleNode.nodeValue); //null
      //   }

      // 2.文本节点   节点类型 nodeType ：3   节点名 nodeName ：text  节点值nodeValue： 文本的内容
      //   var textNode = eles[4];
      //   console.log(textNode.nodeType); //3
      //   console.log(textNode.nodeName); //#text
      //   console.log(textNode.nodeValue); //我是文本

      // 3.注释节点 节点类型 nodeType:8 节点名 nodeName：comment 节点值 nodeValue :注释内容；
      //   var commentNode = eles[1];
      //   console.log(commentNode.nodeType);
      //   console.log(commentNode.nodeName);
      //   console.log(commentNode.nodeValue);

      // 4.属性节点 ； nodeType是2   节点名：nodeName是属性名 节点值 nodeValue 是属性值；
      // 获取元素节点的属性
      var attrs = containerEle.attributes; // 获取元素的所有属性内容；
      console.log(attrs);
      var myattr = attrs[1];
      console.log(myattr.nodeType); // 2
      console.log(myattr.nodeName); // myattr
      console.log(myattr.nodeValue); //myval

      // 总结 ： 节点分类 nodeType
      /* 
                1.元素节点( nodeName ：大写标签名 nodeValue:null ) 
                2.属性节点(nodeName: 属性名 nodeValue：属性值)  
                3.文本节点（nodeName：text nodeValue：文本内容）  
                8 注释节点（nodeName：comment ；nodeVlaue：注释内容）；
        */
    </script>
  </body>
</html>
